<template>
	<view class="login">
		<image :src="IMGLink + '/login/loginbg.png'" mode="widthFix" class="topbg"></image>
		<view class="loginbox">
			<view class="label_">手机号</view>
			<view class="block_">
				<input class="input" v-model="form.mobile" placeholder="输入手机号" placeholder-class="inho" />
			</view>

			<view class="label_">验证码</view>
			<view class="block_">
				<input class="input" v-model="form.verification_code" placeholder="输入验证码" placeholder-class="inho" />
				<button class="getcode" :disabled="getcodeState"
					@click="getcodeDe">{{canClick ? "获取验证码" : time}}</button>
			</view>

			<button type="default" :disabled="btnState" class="loginbtn" @click="login">登录</button>

			<view class="ts">没有账号，点击<text class="ts_" @click="link_to">注册</text></view>
		</view>
	</view>
</template>

<script>
	import {
		sendSms,
		login
	} from "@/api/login.js"
	export default {
		name: "login",
		data() {
			return {
				IMGLink: this.IMGLink,
				form: {
					mobile: "",
					verification_code: ""
				},
				canClick: true,
				time: 60,
				timer: null
			}
		},
		computed: {
			getcodeState() {
				let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
				return !(reg.test(this.form.mobile))
			},
			btnState() {
				let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
				return !(reg.test(this.form.mobile) && !!this.form.verification_code && this.form.verification_code
					.length === 6)
			}
		},
		onHide() {
			if (this.timer) clearInterval(this.timer)
		},
		methods: {
			getcodeDe() {
				if (!this.canClick) {
					return
				}
				this.canClick = false
				this.countdownFun()
				this.getCode()
			},
			login() {
				login(this.form).then(res => {
					let code = res.code
					if (+code === 200) {
						this.$Toast.success("登录成功")
						let {
							token,
							userInfo
						} = res.data;
						this.$store.commit("setToken", token)
						this.$store.commit("setHasRegister", true)
						this.$store.dispatch("updateUserInfo")
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/home/index"
							})
						}, 300)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getCode() {
				sendSms({
					mobile: this.form.mobile
				}).then(res => {
					let code = res.code;
					if (+code === 200) {
						this.$Toast.none("发送成功")
					} else {
						this.$Toast.none("发送失败")
						this.clear()
					}
				}).catch(err => {
					this.$Toast.none(err.msg)
					this.clear()
					console.log(err)
				})
			},
			countdownFun() {
				this.time--
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						clearInterval(this.timer)
						this.time = 60
						this.canClick = true
					}
				}, 1000)
			},
			clear() {
				clearInterval(this.timer)
				this.time = 60
				this.canClick = true
			},
			link_to() {
				uni.navigateTo({
					url: "/pages/login/register"
				})
			}
		}
	}
</script>

<style scoped>
	.login {
		width: 100%;
	}

	.topbg {
		display: block;
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
	}

	.loginbox {
		position: relative;
		z-index: 2;
		margin: -180rpx auto 0;
		width: 100%;
		height: auto;
		border-radius: 50rpx 50rpx 0 0;
		box-sizing: border-box;
		padding: 50rpx 64rpx;
		background-color: white;
	}

	.label_ {
		margin: 50rpx 0 2rpx 0;
		font-size: 34rpx;
		color: #000;
		font-weight: bold;
	}

	.label_:nth-of-type(1) {
		margin: 20rpx 0 2rpx 0;
	}

	.block_ {
		position: relative;
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.block_ .input {
		width: 100%;
		height: 100%;
	}

	.inho {
		font-size: 28rpx;
		color: #A8A8A8;
		line-height: 84rpx;
	}

	/deep/ button {
		margin: 0;
		padding: 0;
	}

	.getcode {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
		width: 186rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
		background-color: white;
		border: 1px solid #F54642;
		font-size: 24rpx;
		color: #F54642;
		text-align: center;
		z-index: 2;
	}

	.getcode[disabled] {
		border: 1px solid #c8c8c8;
		background-color: #c8c8c8;
		color: white;
	}

	.loginbtn {
		margin: 108rpx auto 0;
		width: 82.4%;
		height: 104rpx;
		line-height: 104rpx;
		text-align: center;
		border-radius: 104rpx;
		background-color: #F54642;
		color: white;
	}

	.loginbtn[disabled][type=default] {
		background-color: #c8c8c8;
		color: white;
	}

	.ts {
		margin: 40rpx auto 0;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: #666;
	}

	.ts .ts_ {
		color: #F54642;
	}
</style>
